<template>
	<view class="my_task">
		<view class="content">
			<view class="title">我的任务</view>
			<view class="task">
				<image :src="`${imgPath}/upload/h5/signIn/4.png`"></image> 我的任务
				<button @click="toComplete">去完成</button>
			</view>
			<view class="task">
				<image :src="`${imgPath}/upload/h5/signIn/4.png`"></image> 我的任务
				<button @click="toComplete">去完成</button>
			</view>
			<view class="task">
				<image :src="`${imgPath}/upload/h5/signIn/4.png`"></image> 我的任务
				<button @click="toComplete">去完成</button>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				imgPath: uni.imgPath
			}
		},
		methods: {
			toComplete() {
				uni.showToast({
					title: '模块开发中',
					icon: "none",
					mask: true
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.my_task {
		background: linear-gradient(180deg, #EFC889 0%, #F5F5F5 100%);
		padding: 10rpx;
		margin-bottom: 40rpx;

		.content {
			background: #fff;
			border-radius: 20rpx;
			padding: 30rpx;

			.title {
				font-weight: bold;
				text-align: center;
				font-size: 32rpx;
				color: #000;
			}

			.task {
				padding: 10rpx;
				font-size: 28rpx;

				image {
					width: 56rpx;
					height: 56rpx;
					vertical-align: middle;
					margin-right: 20rpx;
				}

				button {
					float: right;
					line-height: 50rpx;
					padding: 0 30rpx;
					font-size: 20rpx;
					background: #366FFA;
					border-radius: 50rpx;
					color: #fff;
				}
			}
		}
	}
</style>